<template>
  <div class="vehicleAnalysisODWrap">
    <div class="pageTableInner">
      <div class="infoSearchWrap">
        <div class="infoSearchOne">
          <el-row :gutter="0">
            <!-- <el-col :span="5">
              <div class="searchWrap">                  
                <span class="searchFont">分析类型:</span>
                <span class="searchInputFont">
                  <el-select v-model="searchInfo.dataType" size="mini" @change="changeType">
                    <el-option
                      v-for="item in typeList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col> -->
            <el-col :span="7" v-show="searchInfo.dataType == 1">
              <div class="searchWrap">
                <span class="searchFont">行政区域:</span>
                <span class="searchInputFont" style="width: 38%;">
                  <el-select :disabled="$store.state.userInfo.regionId?true:false" v-model="searchInfo.parentId" @change="changeDistrict(searchInfo.parentId)" size="mini" clearable placeholder="行政区">
                    <el-option
                      v-for="item in $store.state.districtData"
                      :key="item.id"
                      :label="item.regionName"
                      :value="item.id">
                    </el-option>
                  </el-select>
                </span>
                <span class="searchInputFont" style="width: 38%;">
                    <el-select v-model="searchInfo.street" @change="checkstreet" size="mini" :clearable="false" clearable placeholder="街道">
                      <el-option
                        v-for="item in streetData"
                        :key="item.id"
                        :label="item.regionName"
                        :value="item.id">
                      </el-option>
                    </el-select>
                 </span>
              </div>
            </el-col>
            <!--<el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">所属企业:</span>
                <span class="searchInputFont">
                <el-select v-model="searchInfo.enterpriseNo" size="mini" @change="selectGovAreaMap" clearable placeholder="全部">
                    <el-option
                      v-for="item in this.$store.state.companyInfos"
                      :key="item.enterpriseNo+''"
                      :label="item.enterpriseName"
                      :value="item.enterpriseNo+''">
                    </el-option>
                  </el-select>
                </span>
              </div>
            </el-col>-->
            <el-col :span="5">
              <div class="searchWrap">
                <span class="searchFont">时间:</span>
                <span class="searchInputFont">
                   <el-date-picker
                     v-model="searchInfo.statisTime"
                     @change="selectGovAreaMap"
                     style="width: 100%;"
                     align="right"
                     type="date"
                     size="mini"
                     value-format="yyyy-MM-dd"
                     placeholder="选择日期"
                     :picker-options="pickerOptions1">
                  </el-date-picker>
                </span>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="mapAndTableWrap">
        <div class="tableWrapLeft">
          <div class="tableWrapInner" >
            <el-table
              ref="multipleTable"
              :data="rows"
              stripe
              :height="tableHeight"
              tooltip-effect="dark"
              style=""
            >
              <el-table-column
                :label="searchInfo.dataType==1 ? '街道名称' :'小区名称'"
                prop="streetName"
                show-overflow-tooltip
              >
              </el-table-column>
              <el-table-column
                label="O"
                prop="outCount"
                show-overflow-tooltip>
              </el-table-column>
              <el-table-column
                label="D"
                prop="enterCount"
                show-overflow-tooltip>
              </el-table-column>
            </el-table>
          </div>

        </div>
        <div class="mapRight">
          <div class="containerWrap">
            <img src="./img/towardsLeft.png" v-show="tableShow" alt="" @click="changeWidth" class="navImgStyle">
            <img src="./img/towardsRight.png" v-show="!tableShow" alt="" @click="changeWidth" class="navImgStyle">
            <div style="width: 100%;height: 100%;position: relative;" ref="mapScreenfull">
              <div class="infoButton">
                <i @click='screenfullMap' :class="iconFull"></i>
              </div>
              <!--<div class="colorWrap">
                <div v-for="(item,index) in allCompanies" :key="index">
                  <span class="colorlist" :style="'background-color:'+item.color"></span>{{item.enterpriseName}} <span style="float: right;color:#3975FE;margin-left: 5px; ">{{item.count}}</span><br/>
                </div>
              </div>-->
              <div id="container"></div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: [],
    data () {
      return {
        iconFull: "iconfont icon-quanping2",
        searchInfo: {
          "dataType" : 1,
          "enterpriseNo": "",
          "parentId": this.$store.state.userInfo.regionId,
          "street": "",
          "statisTime": ""
        },
        typeList: [{id:1, name:"街道"}, {id:2, name:"交通小区"}],
        allCompanies: this.$store.state.companyInfos,
        parentId: "",
        enterpriseId: "",
        rows: [{districtName: "粤海街道", O: "100", D: "50"}],
        tableHeight: "400",
        mapData: [],
        tableShow: true,
        streetData: [],
        timeData: [],
        dataM: [{geometry: {type: 'Point', coordinates: [113.95662, 22.530658]}, count: 1}],
        dataIndex: 0,
        map: {},
        fileStrList: [],
        splitMapList: {other: '#fddf01', 1: "#f25b4a", 2: "#fddf01", 3: "#01CBE3"},
        pickerOptions1: {
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        csdata:[{
          geometry: {
            type: 'LineString',
            coordinates: [[114.0449533639,22.5468733452], [113.9308197729, 22.5135394612]]
          },
          count: 50
        },{
          geometry: {
            type: 'LineString',
            coordinates: [[113.9059066772,22.5644028926], [114.0641784668,22.5319023638]]
          },
          count: 80
        },{
          geometry: {
            type: 'LineString',
            coordinates: [[113.9398956299,22.6967038738], [113.8993835449,22.4827406944]]
          },
          count: 10
        }],
        mapvLineLayer:'',
        mapvTimeLayer:'',
      }
    },
    created(){
      this.searchInfo.statisTime = this.dtime().format('YYYY-MM-DD')
      setTimeout(()=>{
        if(this.$store.state.userInfo.regionId){this.changeDistrict(this.searchInfo.parentId)}
      },500)
    },
    mounted(){
      document.querySelector(".containerWrap").style.height = document.querySelector(".vehicleAnalysisODWrap").clientHeight - 78 + "px"
      this.$nextTick(()=>{
        //表格滚动
        this.tableHeight=document.querySelector(".vehicleAnalysisODWrap").clientHeight-105
      })
      this.getHotMap()
    },
    methods: {
      selectGovAreaMap(){
        var data = {id: this.searchInfo.statisTime, dataType: this.searchInfo.dataType, districtId: '', streetId: ''}
        if(this.searchInfo.dataType == 1){
          data.districtId = this.searchInfo.parentId
          data.streetId   = this.searchInfo.street
        }

        this.axios.post(process.env.API_HOST + `/dataAnalysis/od`, data)
          .then(result => {
          result = result.data
          if (result.code == 200) {
            this.csdata=[]
            this.timeData=[]
            this.mapvLineLayer ? this.mapvLineLayer.destroy() : ''
            this.mapvTimeLayer ? this.mapvTimeLayer.destroy() : ''

            result.result.mapDataList.forEach(item=>{
              this.csdata.push({
                geometry: {
                  type: 'LineString',
                  coordinates: [item.startLngAndLat, item.endLngAndLat]
                },
                count: item.count
              })
              this.curive(item.startLngAndLat, item.endLngAndLat, 30);
            })

            this.rows=result.result.streetDataList
            this.addMapv(this.csdata)
          }
        })
      },
      curive(fromPoint, endPoint, n) {
        var delLng = (endPoint[0] - fromPoint[0]) / n;
        var delLat = (endPoint[1] - fromPoint[1]) / n;

        for (var i = 0; i < n; i++) {
          var pointNLng = fromPoint[0]-0 + delLng * i;
          var pointNLat = fromPoint[1]-0 + delLat * i;
          this.timeData.push({
            geometry: {
              type: 'Point',
              coordinates: [pointNLng, pointNLat]
            },
            count: 1,
            time: i
          });
        }
      },
      addMapv(data){
        this.mapvLineLayer = new mapv.baiduMapLayer(
          this.map, 
          new mapv.DataSet(data), 
          {
            strokeStyle: 'rgba(55, 50, 250, 0.3)',
            globalCompositeOperation: 'lighter',
            shadowColor: 'rgba(55, 50, 250, 0.5)',
            gradient: {0:'rgba(55, 50, 250, 0.2)',1:'rgba(55, 50, 250, 1)'},
            lineWidth: 0.9,
            draw: 'intensity'
          }
        );

        this.mapvTimeLayer = new mapv.baiduMapLayer(
          this.map, 
          new mapv.DataSet(this.timeData), 
          {
            fillStyle: 'rgba(255, 250, 250, 0.9)',
            size: 0.5,
            animation: {
              type: 'time',
              stepsRange: {
                start: 0,
                end: 30
              },
              trails: 1,
              duration: 5,
            },
            draw: 'simple'
          }
        );
      },
      // 改变类型
      changeType(){
        if(this.searchInfo.dataType == 2){
          //小区
          this.showAreaCenter()
          this.selectGovAreaMap()
          this.$store.state.districtData.forEach(item => {
            this.showArea(JSON.parse(item.regionPoints))
          })
          return
        }else if(!!this.searchInfo.street){
          this.checkstreet()
        }else{
          this.changeDistrict(this.searchInfo.parentId)
        }
      },
      //改变行政区 获取街道
      changeDistrict(parentId){
        this.parentId = parentId
        this.searchInfo.street = ""
        this.map.clearOverlays();//清理
        this.selectGovAreaMap()
        if (!parentId) {
          this.showAreaCenter();
          this.streetData = []
          this.$store.state.districtData.forEach(item => {
            this.showArea(JSON.parse(item.regionPoints))
          })
          return
        }
        this.$store.state.districtData.forEach(item => {
          if (item.id == parentId) {
            this.showAreaCenter(JSON.parse(item.regionPoints))
          }
        })
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId}).then(response => {
          const result = response.data
          if (result.code == 200) {
            this.streetData = result.result
            result.result.forEach(item => {
              this.showArea(JSON.parse(item.regionPoints))
            })
          }
        })
        /*
        this.axios.post(process.env.API_HOST + '/common/selectRegion', {parentId: parentId}).then(response => {
          const result = response.data
          if (result.code == 200) {
            this.streetData = result.result
          }
        })
        */
      },
      //改变街道
      checkstreet(){
        if(!this.searchInfo.street){
          this.changeDistrict(this.searchInfo.parentId)
          return ;
        }
        setTimeout(()=>{
          this.selectGovAreaMap()
        })
        this.streetData.forEach(item => {
          if (item.id == this.searchInfo.street && item.regionPoints) {
            this.showAreaCenter(JSON.parse(item.regionPoints))
          }
        })
      },
      changeWidth(){
        if (this.tableShow) {
          document.querySelector(".tableWrapLeft").style.width = "0"
          document.querySelector(".mapRight").style.width = "100%"
        } else {
          document.querySelector(".tableWrapLeft").style.width = "25%"
          document.querySelector(".mapRight").style.width = "75%"
        }
        this.tableShow = !this.tableShow
      },
      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },

      getHotMap(){
        this.map = new BMap.Map("container", {
          enableMapClick: false,
          minZoom: 11,
          maxZoom: 19,
        });// 创建Map实例

        this.map.centerAndZoom(new BMap.Point(114.188283, 22.667865), 11);  // 初始化地图,设置中心点坐标和地图级别
        this.map.addControl(new BMap.OverviewMapControl());
        this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        // this.map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));
        this.map.enableScrollWheelZoom(); // 允许滚轮缩放
        this.map.setMapStyle({
          style: 'midnight'
        });
        this.changeDistrict()
      },

      //百度提取区域经纬度
      showArea(areaPoints) {
        let _this = this, arr = []
        if (areaPoints && areaPoints.length > 2) {
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          // Polyline  Polygon
          _this.ply = new BMap.Polygon(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 0.01,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          });  //创建多边形

          _this.map.addOverlay(_this.ply);  //添加覆盖物
        }
      },
      //百度提取区域经纬度
      showAreaCenter(areaPoints) {
        let _this = this, arr = []
        _this.map.clearOverlays();
        if (areaPoints && areaPoints.length > 2) {
          //清除地图覆盖物
          areaPoints.forEach((item) => {
            arr.push(new BMap.Point(item.lng, item.lat))
          })
          //
          _this.ply = new BMap.Polyline(arr, {
            strokeColor: "#3975FE",    //边线颜色。
            fillColor: "white",      //填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 1,       //边线的宽度，以像素为单位。
            strokeOpacity: 1,    //边线透明度，取值范围0 - 1。
            fillOpacity: 1,      //填充的透明度，取值范围0 - 1。
            strokeStyle: 'solid' //边线的样式，solid或dashed。
          }); //创建多边形

          _this.map.addOverlay(_this.ply);  //添加覆盖物
          _this.map.setViewport(_this.ply.getPath());    //调整视野
        } else {
          this.map.setCenter(new BMap.Point(114.14101345267, 22.6485544122), 11)
          _this.map.setZoom(11)
        }
      },
    },
    watch: {}
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"
  .vehicleAnalysisODWrap
    page()
    border-radius 5px
    .tableWrapLeft
      width: 25%;
      float: left;
      border-radius: 5px;
      transition width 0.5s
      padding-bottom 50px
      .tableWrapInner
        padding: 10px 10px 50px 10px;box-sizing: border-box;border-radius: 5px;width: 97%;background-color: white;
    .mapRight
      width: 75%;
      display: inline-block;
      transition width 0.5s
    .containerWrap
      height: 100%;
      width: 100%;
      padding 10px
      box-sizing border-box
      background-color white
      border-radius 5px
      position: relative;
      .navImgStyle
        position: absolute;left: 15px;top: 50%;z-index: 10;cursor: pointer;
        &:hover
          opacity 0.8
      .infoButton
        width 20px
        height 20px
        font-size: 16px;
        color: #3975FE;
        position: absolute;
        top: 10px;
        right: 10px;
        z-index 5
        opacity: 0;
        .iconfont
          color #bef2ff
          display: inline-block;
          font-size: 20px;
          cursor pointer
      .colorWrap
        position: absolute;
        left 10px;
        top: 10px;
        background-color rgba(255, 255, 255, 0.7)
        line-height 20px
        padding 10px
        border-radius 5px
        z-index: 5;
        color: black;
        margin-left: 60px;
        margin-top 10px;
        .colorlist
          display: inline-block;
          width: 10px;
          height 10px;
          border-radius: 50%;
          background-color: red;
          margin-right: 3px;
      #container
        height: 100%;
        width: 100%;
    &:hover .infoButton
      opacity: 1;
    .BMap_scaleCtrl
      bottom 20px !important
    .mapTopWrap
      background-color: white;
      overflow: hidden;
      min-height 90px;
      width 190px

      .mapBaseTitle
        color: #3975FE;
        font-size: 12px;
        writing-mode: vertical-lr;
        letter-spacing: 5px;
        float: left;
        padding: 11px;

    .BMapLib_SearchInfoWindow
      width 200px !important
      &::after
        content: ""
        position: absolute;
        background-color: white;
        width: 100px;
        height: 3px;
        bottom: 0px;
        left: 50px;
        z-index 100

    .BMapLib_bubble_title {
      padding-left: 14px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      background-color white
      border-radius 10px !important
      /*display none !important*/
    }

    .BMapLib_bubble_top, .BMapLib_bubble_close {
      border-radius 10px !important
      border none !important
      background-color #f9f9f9 !important
    }

    #BMapLib_SearchInfoWindow0, .BMapLib_SearchInfoWindow {
      border-radius 10px !important
      /*min-width 200px !important*/
      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.34) !important
      border none
    }

    .BMapLib_SearchInfoWindow .BMapLib_bubble_center {
      position static !important /*position absolute
      left 0
      top 31px*/
    }

    .BMapLib_bubble_content {
      min-height 100px !important
    }
</style>
